<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>非单文件组件</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
       <School></School>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false

    // 定义组件
    const School = Vue.extend({
        template: `
            <div>
            <h1>学校名:{{name}}</h1>
            <h1>学校地址:{{address}}</h1>
            <h1>班主任:{{teacher}}</h1>
            <button @click="showCheng">点我</button>
            </div>
         `,
        data() {
            return {
                name: '尚硅谷',
                address: '宏福科技园',
                teacher: '程程'
            }
        },
        methods: {
            showCheng() {
                alert(this.teacher)
            }
        },
    })

    // 注册组件
    new Vue({
        el:'#root',
        components:{
            School
        }
    })
</script>

</html>